<template>
  <div class="reportSubmitIndex">
  <div id="cc" class="container" >
    <img src="https://api.cloudcpc.com//static/index/images/bannerColor.jpg" alt="" class="" class="banner1">
    <img src="https://api.cloudcpc.com//static/index/images/logo.png" alt="" class="logo">
    <form  enctype="multipart/form-data" action=""  id="form" >
      <div class="formQuestion">
        <div class="formItem">
          <span>问题类别:</span>
          <span class="formItemtypes">{{questionItem}}</span>
          <input type="hidden" name="question_type"  value="公款大吃大喝"  />
        </div>
        <div class="formItem">
          <span>举报标题:</span>
          <span>
                <input type="text" name="title"  placeholder="请输入举报标题" class="reportTitle" v-model="title" >
            </span>
        </div>
        <div class=" formTextarea" >
          <div class="formItem">
            <span>举报内容:</span>
            <span>
                  <input type="text"   placeholder="20字以上，500字以内"  disabled >
              </span>
          </div>
          <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
              <div class="weui-cell__bd">
                <textarea   autofocus="autofocus" name="content" class="weui-textarea reportContent" id="textarea" @keyup="count" v-model="text"></textarea>
                <div class="weui-textarea-counter">
                  （剩余 <span class="num" id="num">{{num}}</span>字）
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="formItem">
          <span>问题所属公司:</span>
          <span>
                <input type="text" name="belong_company" placeholder="请输入问题所属公司" v-model="company" class="reportCompany">
            </span>
        </div>
        <div class="formItem">
          <span>被反映对象:</span>
          <span>
                <input type="text" name="belong_dept" placeholder="请输入被反映部门名称" v-model="departement" class="reportDepartment">
            </span>
        </div>
        <div class="formItem">
          <span>职级:</span>
          <span>
                <input type="text"  name="rank" v-model="rank" placeholder="请输入职级" class="reportPosi">
          </span>
        </div>
        <div class="formItem enClosure">
          <span>图片上传:</span>
          <span id="img">
                <label  id="addEnclosure" @click="addPic">添加图片</label>
                <input
                  type="file" accept="image/jpeg,image/jpg,image/png,image/gif"
                    id="fileInput" name="imageFile" ref="fileInput" @change="emitAddPic">
            </span>
        </div>
        <div class=" weui-cells_form ">
          <div class="weui-uploader">
            <div class="weui-uploader__bd">
              <ul class="weui-uploader__files" id="uploaderFiles" ref="uploaderFiles">
                <li class="weui-uploader__file" v-for="(item,index) in picArray" :style="{backgroundImage:'url('+item.pic+')'}">
                  <span class="deletIcon" @click.stop="deleteIcon(index)"></span></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="formItem enClosure">
          <span>视频上传:</span>
          <span id="video">
                    <label  id="addEnclosure2" @click="addVideo">添加视频</label>
                <input
                  type="file" accept="video/"
                  id="fileInput2" name="videoFile" ref="fileInput2" @change="emitAddPic2">
                </span>
        </div>
        <div class=" weui-cells_form ">
          <div class="weui-uploader">
            <div class="weui-uploader__bd">
              <ul class="weui-uploader__files" id="uploaderFiles2" ref="uploaderFiles2">
                <li class="weui-uploader__file" v-for="(item,index) in videoArray" @click.stop="videoPlay(index)">
                  <video  :src="item.pic" object-fit="cover" ></video>
                  <span class="deletIcon" @click.stop="deleteIcon2(index)"></span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="formTips">
          <span>温馨提示：</span> 至少上传1个附件，最多上传4个附件，仅限图片或视频，每个附件大小不超过5M。
        </div>
      </div>
      <div class="formBtn">
        <input type="button" name="btn" value="提交" @click.stop="sub();" />
      </div>
    </form>
  </div>
    <Alarm :alarm="alarm" v-if="showAlarm" @cancel="cancel" @confirm="confirm"></Alarm>
  <div id="loadingToast" v-if="loading">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
      <i class="weui-loading weui-icon_toast"></i>
      <p class="weui-toast__content">附件上传中，请耐心等候...</p>
    </div>
  </div>
    <!--<div v-if="showData">-->
        <!--<div class="successTips">-->
            <!--<p>-->
              <!--你的资料已成功提交-->
            <!--</p>-->
          <!--<p class="confirmBtns">-->
            <!--确定-->
          <!--</p>-->
        <!--</div>-->
    <!--</div>-->
  </div>
</template>
<script>
  import Alarm from '../../components/alarm.vue'
  import * as qiniu from 'qiniu-js'
  export default({
    data (){
        return {
          token:'',
          loading:false,
          questionItem:'',
          company:'',
          text:'',
          title:'',
          rank:'',
          departement:'',
          num:500,
          defaultId:0,
          alarm:'',
          showAlarm:false,
          path:'',
          videoPath:'',
          picArray:[],
          videoArray:[],
          tempImgArray:[],
          tempVideoArray:[],
          showData:false
        }
    },
    components:{
      Alarm:Alarm
    },
    methods:{
      videoPlay(index){
          this.videoArray[index].pic.play()
      },
      sub(){
          if(
              this.questionItem&&
                this.company &&
                this.text&&
                this.rank&&
                this.departement
                &&this.title
          ){
              if(this.tempImgArray.length>0){
                  var str =''
                if(this.tempImgArray.length>=4){
                      for(var i=0;i<3;i++){
                          str +=this.tempImgArray[i]
                      }
                }
                str +=this.tempImgArray[this.tempImgArray.length-1]
              }
            if(this.tempVideoArray.length>0){
              var str2 =''
              if(this.tempVideoArray.length>=4){
                for(var i=0;i<3;i++){
                  str2 +=this.tempVideoArray[i]
                }
              }
              str2 +=this.tempVideoArray[this.tempVideoArray.length-1]
            }
              this.axios.post('/home/Report/report?'+`${this.baseUrl}`,{
                question_type:this.questionItem,
                title:this.title,
                content:this.text,
                belong_company:this.company,
                belong_dept: this.departement,
                rank:this.rank,
                img:this.tempImgArray,
                video:str2,
                company_id:this.company_id
              }).then((res)=>{
                  console.log(res)
                  if(res.data.code==1){
                    this.alarm ='举报成功,2s后返回首页'
                    this.showAlarm =true
                    setTimeout(()=>{
                      this.$router.push({
                        path:'/'
                      })
                    },2000)
                  }else{
                    this.alarm =res.data.msg
                    this.showAlarm =true
                  }
              }).catch((err)=>{
                  console.log(err)
                this.alarm ='举报失败,请刷新浏览器后再重新上传'
              })
          }else{
            this.alarm ='请完善举报信息'
              this.showAlarm =true
          }
      },
      uploadFile(){
      console.log(123)
      },
      cancel (){
        this.showAlarm =false
      },
      confirm (){
        this.showAlarm =false
      },
      count(e){
        if(e.keyCode ==32){
         this.num = 500-this.text.length
          if(this.text.length>=500){
            e.preventDefault();
            this.text =this.text.substr(0,500);
            this.num =0
          }
        }else if(e.keyCode ==8){
          this.defaultId--;
          this.num  =500-this.text.length
        }else{
          this.defaultId++;
          this.num  =500-this.text.length
          if(this.text.length>=500){
            e.preventDefault();
            this.text =this.text.substr(0,500);
            this.num =0;
          }
        }
      },
      emitAddPic(){
        this.addPic()
      },
      emitAddPic2(){
        this.addVideo()
      },
      deleteIcon(index){
        this.picArray.splice(index,1)
      },
      deleteIcon2(index){
        this.videoArray.splice(index,1)
      },
      addPic(){
          var files =this.$refs.fileInput.files;
          let that =this
          var url = window.URL || window.webkitURL || window.mozURL ;
          console.log(url.createObjectURL(files[0]))
          if(files[0]){
            that.loading =true
            var observable = qiniu.upload(files[0], null, this.token,null)
            var observer = {
              next(res){
//                console.log(res)
              },
              error(err){
//                console.log(err)
                that.loading =false

              },
              complete(res){
                  var str ='https://oss.co-links.com/'+ res.hash+'#'
                that.loading =false
//                console.log(str)
//                console.log(that.tempImgArray)
                that.tempImgArray[that.tempImgArray.length] =str;
              }
            }
            var subscription = observable.subscribe(observer) // 上传开始
            if(files[0].size/1024>5120){
              this.showAlarm =true
              this.alarm='上传文件不得超过5M'
              return false
            }
          }
          if(this.picArray.length>3){
            this.picArray[3].pic =url.createObjectURL(files[0])
          }else{
            for(var i=0;i<files.length;i++){
              this.picArray.push({
                pic:url.createObjectURL(files[0])
              })
            }
          }
      },
      addVideo(){
          let that =this
        var files =this.$refs.fileInput2.files
        var url = window.URL || window.webkitURL || window.mozURL ;
        if(files[0]){
          that.loading =true
          if(files[0].size/1024>51200){
            this.showAlarm =true
            this.alarm='上传文件不得超过5M'
            return  false
          }
          var observable = qiniu.upload(files[0], null, this.token,null)
          var observer = {
            next(res){
//              console.log(res)
            },
            error(err){
//              console.log(err)

            },
            complete(res){
              that.loading =false
              var str ='https://oss.co-links.com/'+ res.hash+'#'
//              console.log(that.tempVideoArray.length)
              that.tempVideoArray[that.tempVideoArray.length] =str
            }
          }
          var subscription = observable.subscribe(observer) // 上传开始
        }
        if(this.videoArray.length>3){
          this.videoArray[3].pic =url.createObjectURL(files[0])
        }else{
          for(var i=0;i<files.length;i++){
//            console.log(url.createObjectURL(files[0]))
            this.videoArray.push({
              pic:url.createObjectURL(files[0])
            })
          }
        }
      }
    },
    computed:{
      ...mapState({
        company_id:state=>state.app.company_id||getQueryParam('identifier',window.location.href).slice(0,getQueryParam('identifier',window.location.href).indexOf('/'))
      })
    },
    mounted(){
        this.questionItem =this.$route.query.item
        this.axios.get('/home/Qiniu/upload?'+`${this.baseUrl}`)
          .then((res)=>{
            this.token =res.data.token
          })
    }
  })
</script>
<style scoped="">
  .reportSubmitIndex{
    height: 100%;
    width: 100%;
  }
  .container {
    width: 100%;
    height: 100%;

    overflow: hidden;
    padding-bottom: 5.3rem;
  }
  .logo {
    position: absolute;
    top: 1.8rem;
    right: 0;
    width: 5.75rem;
    height: 2.84rem;
    z-index: 3;
  }
  .weui-uploader__file{
    background-size: 80px 80px;
  }
  .banner1{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3.97rem;
    z-index: 2
  }
  #form{
    position: absolute;
    left: 0;
    top: 0rem;
    z-index: 1;
    width: 100%;
    background-image: url(https://api.cloudcpc.com//static/index/images/bannerColor2.jpg);
    background-position: center;
    background-size: 7.5rem 1.2rem;
    background-repeat: repeat;
  }
  .formItem{
    height: 0.92rem;
    border: 1px solid #f5f5f5;
    padding-left: 0.32rem;
    padding-right: 0.3rem;
    border-radius: 0.15rem;
    line-height: 0.92rem;
    margin-bottom: 0.18rem;
    background: white;
    font-size: 0;

  }
  .formQuestion{
    width: 6.88rem;
    margin-left: 0.32rem;
    margin-top: 4.17rem;
    border-radius: 0.16rem;
  }
  .formItem span:nth-child(1){
    display: inline-block;
    color: #333;
    font-size: 0.3rem;
    font-weight: bold;
    width: 2.2rem;
    height: 100%;
    vertical-align: top
  }
  .formItem span:nth-child(2){
    display: inline-block;
    color: #333;
    font-size: 0.28rem;
    height: 100%;
    width: 4rem;
    overflow: hidden;
    vertical-align: top
  }
  .formItem span:nth-child(2) input{
    display: inline-block;
    border: none;
    outline: none;
    color: #999999;
    height: 100%;
    width: 100%;
    line-height: 0.92rem
  }

  .formItem span:nth-child(2) input::-webkit-input-placeholder {
    /* placeholder颜色  */
    color: #999999;
    /* placeholder字体大小  */
    font-size: 0.28rem;
    /* placeholder位置  */

  }
  .formTextarea{
    position: relative;
    margin-bottom: 0.2rem
  }
  .formTextarea .formItem{
    position: absolute;
    top: 0;
    height: 0.92rem;
    width: 100%;
    padding: 0;
    z-index: 22;
    border: none
  }
  .formTextarea .formItem span:nth-child(1){
    padding-left: 0.30rem
  }
  .weui-cells{
    margin-top: 0;
    padding-top: 0.94rem
  }
  .enClosure{
    font-size: 0
  }
  .weui-textarea-counter{
    text-align: left !important;
    padding-bottom: .2rem;
    font-size: 0.24rem;
    color: #999999
  }
  .enClosure span:nth-child(1){
    position: relative;
    top: 0;
    vertical-align: top
  }
  .enClosure span:nth-child(2){
    display: inline-block;
    width: 4rem;
    position: relative;
    height: 100%;
  }
  .enClosure input{
    position: absolute;
    right: 0;
    top: 0.15rem;
    width: 2.2rem;
    height: 0.6rem;
    width: 2.2rem;
    height: 0.6rem;
    line-height: 0.6rem;
    color: white;
    font-size: 0.3rem;
    cursor: pointer;
    -webkit-appearance: none;
    opacity: 0;
    z-index: 1;
    position: absolute;
  }
  .enClosure span:nth-child(2) label{
    position: absolute;
    right: 0;
    top: 0.15rem;
    width: 2.2rem;
    height: 0.6rem;
    background: #e33123;
    text-align: center;
    line-height: 0.6rem;
    color: white;
    border-radius: 0.12rem;
    -webkit-border-radius:0.12rem;
    z-index: 0;
  }
  .formTips{
    padding-left: 0.32rem;
    padding-right: 0.3rem;
    color: #666666;
    font-size: 0.24rem
  }
  .formTips span{
    color: #e33123
  }
  ::-webkit-scrollbar {display:none}
  input[type="text"]:disabled {
    background-color: white;
  }
  .formBtn {
    width: 5.42rem;
    height: 0.9rem;
    margin: 0 auto;
    text-align: center;
    margin-top: 0.6rem;
    margin-bottom: 0.4rem;
  }
  .formBtn input {
    display: inline-block;
    width: 100%;
    height: 100%;
    background: #dc291b;
    text-align: center;
    font-size: 0.36rem;
    color: white;
    border: none;
    border-radius: 0.16rem;
    -webkit-border-radius: 0.16rem;
  }
  .weui-uploader__file{
    display: inline-block;
    float: none
  }
  .weui-uploader__bd{
    overflow: visible;
  }
  .weui-uploader__file{
    position: relative;
  }
  .deletIcon{
    position:absolute;
    width: 20px;
    height: 20px;
    background: #f43530;
    right: 0;
    top: -10px;
    border-radius: 20px;
    z-index: 5;
  }
  .deletIcon::before {
    content: '';
    width: 10px;
    height: 4px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
  }

  #uploaderFiles2 li video{
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url("https://api.cloudcpc.com//static/index/images/timg.jpg");
    background-size: 100% 100%;
  }
</style>
